<template>
  <div style="max-height: 100vh;overflow: hidden;">
    <el-container style="height: 100%">
      <el-header>
        <Header />
      </el-header>
      <el-container class="mt-[3px]">
        <!-- <el-aside width="35vh"><Side></Side></el-aside> -->
        <el-main class="scrollable-main"><router-view /></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang='ts' setup>
import Header from '../components/HeaderPage.vue'
// import Side from "../components/SidePage.vue";
</script>

<style>
.el-main {
  padding: 10px 250px !important;
  background-color: #f4f5f7;
}

.el-aside {
  height: 100%;
}

.el-header {
  padding: 0;
}

.scrollable-main {
  overflow-y: auto;
  min-height: calc(100vh - 64px); /* 如果有固定的头部高度，需要减去 */
  max-height: calc(100vh - 64px); /* 如果有固定的头部高度，需要减去 */
}

::-webkit-scrollbar {
    width: 1px; /* 水平滚动条的宽度 */
    height: 1px; /* 垂直滚动条的高度 */
}

</style>